<template>
  <BaseModal :show="modalActive" @close="closeDocViewPdfModal" @open="fetchInitialData">
    <template #header>
      <div class="flex justify-between w-full">
        {{ modalStore.title }}
        <BaseIcon
          name="XMarkIcon"
          class="w-6 h-6 text-gray-500 cursor-pointer"
          @click="closeDocViewPdfModal"
        />
      </div>
    </template>

    <form action="">

      <div class="px-4 pb-4 sm:px-6 sm:pb-6">
        <template v-if="pdf_file.success">
          <embed :src="pdf_file.path" type="application/pdf" class="w-full min-h-[650px]"/>
        </template>
      </div>

      <div
        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
      >
        <BaseButton
          variant="gray"
          class="mr-3"
          type="button"
          @click="closeDocViewPdfModal"
        >
          {{ $t('general.cancel') }}
        </BaseButton>


      </div>
    </form>
  </BaseModal>
</template>

<script setup>
import { ref, computed } from 'vue'
// pinia
import { useModalStore } from '@/stores/components/modal'
import { useDocumentStore } from '@/stores/document'
// 
const modalStore = useModalStore()
const documentStore = useDocumentStore()

const modalActive = computed(() => {
  return modalStore.active && modalStore.componentName === 'DocumentViewPdfModal'
})
// 关闭模板
function closeDocViewPdfModal() {
  modalStore.closeModal()
}

// 获取pdf文件
const initPdfFile = ref(false)
const pdf_file = ref({
  success: false,
  msg: '',
  path: ''
})
async function fetchInitialData() {

  initPdfFile.value = false

  if (modalStore.id) {
    const respone = await documentStore.getPdf(modalStore.id)
    pdf_file.value = respone.data
  } else {
    // 参数错误
    console.log('参数错误!')
  }
  
  initPdfFile.value = true
}


</script>
